@@include('include/header.html',{"name": "nowrap","desc": "文字截断"})

<section id="nowrap">
    <div class="demo-item">
        <p class="demo-desc">一行文字截断</p>
        <div class="demo-block">
            <div class="ui-nowrap ui-whitespace">
                一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">一行文字截断弹性布局</p>
        <div class="demo-block">
            <div class="ui-nowrap-flex ui-whitespace">
                一行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">多行文字截断，默认两行</p>
        <div class="demo-block">
            <div class="ui-nowrap-multi ui-whitespace">
                多行文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
            </div>
        </div>
    </div>
</section>

@@include('include/footer.html')